import React from "react";
import PropTypes from 'prop-types';

import humanize from 'humanize-duration'

const UserHeader = props => {
  const { date , user } = props;
  return (
      <div className="user-header">
        <div className="user-info-section">
          <img src={`${user.profilePicture.indexOf('http') === -1 
              ? `${process.env.REACT_APP_SERVE}${user.profilePicture}`
              : user.profilePicture
          }`} width={25} height={25} className="img-circle" alt="" />
          <a href={user.id}>{user.name}</a>
        </div>
        <small className="date">
          {humanize(new Date() - new Date(date),{
              largest: 1,
              round: true,
              units: ['d','h','m'],
              language: 'zh_CN',
            })}{' '}
          前
        </small>
      </div>
  )
}

UserHeader.propTypes = {
  date: PropTypes.number,
  user: PropTypes.shape({
    profilePicture: PropTypes.string.isRequired,
    name: PropTypes.string,
  })
}

UserHeader.defaultProps = {
  user: {
    profilePicture: '/static/assets/users/4.jpeg'
  }
}

export default UserHeader;
